<template>
  <div>
    <div class="w-100 mauto ws">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        class="demo-ruleForm"
        label-width="100px"
      >
        <el-form-item :label="Ishow ? '认证密码' : 'APIKEY'" prop="payPassword">
          <div v-if="Ishow">
            <el-input
              v-model="ruleForm.payPassword"
              class="head-link"
              size="mini"
            ></el-input>
            <el-button
              class="cation"
              icon="el-icon-search"
              size="mini"
              type="primary"
              @click="submitForm"
              >认证
            </el-button>
          </div>
          <div v-if="IsHide">
            <el-input
              v-model="ruleForm.publicKey"
              :rows="2"
              class="head-link"
              type="textarea"
            ></el-input>
            <el-button
              class="cation-1"
              icon="el-icon-search"
              size="mini"
              type="primary"
              @click="clone"
              >关闭
            </el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { userKey } from "@/assets/js/homePage";

export default {
  data() {
    return {
      Ishow: true,
      IsHide: false,
      ruleForm: {
        payPassword: "",
        publicKey: "",
      },
      rules: {
        payPassword: [
          { required: true, message: "请输入认证密码", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    async submitForm() {
      let num = null;
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          num = valid;
        }
      });
      if (num) {
        let res = await userKey({
          payPassword: this.ruleForm.payPassword,
        });
        if (res.code === 200) {
          this.Ishow = false;
          this.IsHide = true;
          this.ruleForm.publicKey = res.data.data;
        }
        // console.log(res.data.data);
      }
    },
    clone() {
      this.Ishow = true;
      this.IsHide = false;
      this.$refs.ruleForm.resetFields();
    },
  },
};
</script>
<style scoped>
.cation {
  margin-left: 20px;
}

.cation-1 {
  margin-left: 20px;
  margin-bottom: 15px;
}

.head-link {
  width: 300px;
}
</style>
